<template>
    <view class="bind-mobile-container">
        <u-gap height="40" bg-color="#FFFFFF" v-show="step === 1"></u-gap>
        <view class="bind-mobile" >
            <u-form :model="bindMobileForm" ref="bindMobileForm">
                <u-form-item label-position="top">
                    <u-input v-model="bindMobileForm.mobile" placeholder="请输入新的手机号" maxlength="11" clearable />
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="bindMobileForm.img_code" placeholder="请输入图片验证码" maxlength="4" clearable />
                    <u-image slot="right" width="150" height="70" :src="valid_img_url" @click="getValidImgUrl"></u-image>
                </u-form-item>
                <u-form-item label-position="top">
                    <u-input v-model="bindMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6" clearable />
                    <u-button slot="right" type="error" size="mini" @click="sendBindMobileSms">{{ bindMobileCodeTips }}</u-button>
                    <u-verification-code seconds="60" ref="uCode" @change="bindMobileCode"></u-verification-code>
                </u-form-item>
            </u-form>
            <u-button :disabled="val_disabled_bind" class="u-m-20" type="error" shape="circle" @click="submitBindForm">保存</u-button>
        </view>
        <view class="bind-success u-flex" v-show="step === 2">
            <image class="icon-success" src="../../static/images/member/icon-success.png"></image>
            <view class="success-title">
                您的手机号已成功绑定为：
                <view>
                    {{ bindMobileForm.mobile }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import * as API_Common from '@/api/common.js'
    import * as API_Safe from '@/api/safe.js'
    import Cache, {
        Keys
    } from '@/utils/cache.js';
    import {
        Foundation,
        RegExp
    } from '@/ui-utils/index.js'
    export default {
        data() {
            return {
                uuid: Cache.getItem('uuid'),
                bindMobileCodeTips: '获取验证码',
                valid_img_url: '',
                step: 1,
                bindMobileForm: {
                    mobile: '',
                    img_code: '',
                    sms_code: ''
                }
            };
        },
        onLoad() {
            this.$nextTick(this.getValidImgUrl)
        },
        computed: {
            /** 保存 按钮是否禁用 */
            val_disabled_bind() {
                const {
                    mobile,
                    img_code,
                    sms_code
                } = this.bindMobileForm
                return !(mobile && img_code && sms_code)
            }
        },
        methods: {
            /** 获取图片验证码URL */
            getValidImgUrl() {
                this.valid_img_url = API_Common.getValidateCodeUrl(this.uuid, 'BIND_MOBILE')
            },
            /** 绑定手机号 发送验证码 */
            sendBindMobileSms() {
                const {
                    uuid
                } = this
                const {
                    mobile,
                    img_code
                } = this.bindMobileForm
                if (!RegExp.mobile.test(mobile)) {
                    this.$u.toast('手机号码格式有误')
                    return
                }
                if (!img_code) {
                    this.$u.toast('请填写图片验证码')
                    return
                }
                if (this.$refs.uCode.canGetCode) {
                    API_Safe.sendBindMobileSms(mobile, img_code, uuid, "BIND_MOBILE").then(res => {
                        this.$u.toast('验证码已发送')
                        /** 通知验证码组件内部开始倒计时 */
                        this.$refs.uCode.start()
                    });
                } else {
                    this.$u.toast('倒计时结束后再发送');
                }
            },
            bindMobileCode(text) {
                this.bindMobileCodeTips = text
            },
            /** 绑定手机号 */
            submitBindForm() {
                const {
                    mobile,
                    sms_code
                } = this.bindMobileForm
                if (!RegExp.mobile.test(mobile)) {
                    this.$message.error('手机号码格式有误！')
                    return
                }
                API_Safe.bindMobile(mobile, sms_code).then(() => {
                    this.$u.toast('保存成功')
                    this.step = 2
                    this.bindMobileForm.mobile = mobile
                    var user = Cache.getItem(Keys.user);
                    user.mobile = mobile
                    Cache.setItem(Keys.user, user)
                    uni.navigateBack({
                        delta:1
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bind-mobile-container {
        .bind-mobile {
            background-color: #FFFFFF;
            margin: 30rpx;
            border-radius: 20rpx;
            padding: 20rpx 40rpx;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

            /deep/.u-label {
                flex: 0 0 180rpx !important;
            }
        }

        .bind-success {
            padding-top: 100rpx;
            width: 100%;
            justify-content: center;

            .icon-success {
                width: 100rpx;
                height: 100rpx;
                margin-right: 30rpx;
            }

            .success-title {
                font-size: 32rpx;
                color: #333;
            }
        }
    }
</style>
